<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
  <title>【VSCode插件】background添加编辑器背景 | 程序小工  | Just do it!</title>
  <meta name="description" content="遇见更好的自己~" />
  <meta name="keywords" content="" />
  <meta name="HandheldFriendly" content="True" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" href="/">
  <link rel="alternate" href="/atom.xml" title="程序小工  | Just do it!">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="VScode 编辑器对中文支持很好，插件丰富，主题也好看，所以目前已经由 sublime 转投 Vscode 了。在插件搜集中找到了可以自定义编辑器背景的插件background，炫酷的界面又可以优雅的装个叉了，所以立马上手尝试了一下。也对相关设置和过程进行一下记录。">
<meta name="keywords" content="vscoode,plugin">
<meta property="og:type" content="article">
<meta property="og:title" content="【VSCode插件】background添加编辑器背景">
<meta property="og:url" content="http://blog.i2arch.tech/2018/06/22/vscode-background/index.html">
<meta property="og:site_name" content="程序小工  | Just do it!">
<meta property="og:description" content="VScode 编辑器对中文支持很好，插件丰富，主题也好看，所以目前已经由 sublime 转投 Vscode 了。在插件搜集中找到了可以自定义编辑器背景的插件background，炫酷的界面又可以优雅的装个叉了，所以立马上手尝试了一下。也对相关设置和过程进行一下记录。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2018-08-14T07:58:30.940Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="【VSCode插件】background添加编辑器背景">
<meta name="twitter:description" content="VScode 编辑器对中文支持很好，插件丰富，主题也好看，所以目前已经由 sublime 转投 Vscode 了。在插件搜集中找到了可以自定义编辑器背景的插件background，炫酷的界面又可以优雅的装个叉了，所以立马上手尝试了一下。也对相关设置和过程进行一下记录。">
    
  <link href="https://fonts.googleapis.com/css?family=Inconsolata|Titillium+Web" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href='//cdn.bootcss.com/node-waves/0.7.5/waves.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="/style.css">
  <script>
    function setLoadingBarProgress(num) {
      document.getElementById('loading-bar').style.width=num+"%";
    }
  </script>
</head>

<body>
  <div id="loading-bar-wrapper">
  <div id="loading-bar"></div>
</div>


  <script>setLoadingBarProgress(20)</script>
  <header class="l_header">
	<div class='wrapper'>
		<div class="nav-main container container--flex">
			<a class="logo flat-box" href='/' >
				程序小工  | Just do it!
			</a>
			<div class='menu'>
				<ul class='h-list'>
					
						<li>
							<a class='flat-box nav-home' href='/'>
								<i class='icon icon-list2'></i>
								首页
							</a>
						</li>
					
						<li>
							<a class='flat-box nav-archives' href='/archives'>
								<i class='icon icon-bookmark'></i>
								归档
							</a>
						</li>
					
						<li>
							<a class='flat-box nav-about' href='/about'>
								<i class='icon icon-user'></i>
								关于
							</a>
						</li>
					
				</ul>
				<div class='underline'></div>
			</div>
			
				<div class="m_search">
					<form name="searchform" class="form u-search-form">
						<input type="text" class="input u-search-input" placeholder="Search" />
						<span class="icon icon-search"></span>
					</form>
				</div>
			
			<ul class='switcher h-list'>
				
					<li class='s-search'><a href='javascript:void(0)'><span class="icon icon-search flat-box"></span></a></li>
				
				<li class='s-menu'><a href='javascript:void(0)'><span class="icon icon-menu flat-box"></span></a></li>
			</ul>
		</div>

		<div class='nav-sub container container--flex'>
			<a class="logo" class="flat-box" href='javascript:void(0)'>
				Word of Forks
			</a>

			<ul class='switcher h-list'>
				<li class='s-comment'><a href='javascript:void(0)'><span class="icon icon-chat_bubble_outline flat-box"></span></a></li>
				<li class='s-top'><a href='javascript:void(0)'><span class="icon icon-arrow_upward flat-box"></span></a></li>
				<li class='s-toc'><a href='javascript:void(0)'><span class="icon icon-format_list_numbered flat-box"></span></a></li>
			</ul>
		</div>
	</div>
</header>
<aside class="menu-phone">
	<nav>
		
			<a href="/" class="nav-home nav">
				首页
			</a>
		
			<a href="/archives" class="nav-archives nav">
				归档
			</a>
		
			<a href="/about" class="nav-about nav">
				关于
			</a>
		
	</nav>
</aside>

    <script>setLoadingBarProgress(40);</script>
  <div class="l_body">
    <div class='container clearfix'>
      <!-- 左侧内容 -->
      <div class='l_main'>
        <article id="post-vscode-background"
  class="post white-box article-type-post"
  itemscope itemprop="blogPost">
	<section class='meta'>

	<h2 class="title">
  	<a href="/2018/06/22/vscode-background/">
    	【VSCode插件】background添加编辑器背景
    </a>
	</h2>

	<div class="pagenav">
		<time>
			2018-06-22
		</time>

		
    
    <div class='cats'>
        <i class="icon icon-bookmark"></i>
        <a href="/categories/VSCode/">VSCode</a>
    </div>


		
			<div class="pagetags">
				<i class="icon icon-price-tag" style="margin-right: 2px;"></i>
				
					<a href="/tags/vscoode/" style="margin-left: 3px;">
						vscoode
					</a>
				
					<a href="/tags/plugin/" style="margin-left: 3px;">
						plugin
					</a>
				
			</div>
			
	</div>
	</section>

	
	<section class="toc-wrapper"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#一-安装插件"><span class="toc-text"> 一、安装插件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1下载地址"><span class="toc-text"> 1.下载地址</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2安装扩展"><span class="toc-text"> 2.安装扩展</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#二-使用方法"><span class="toc-text"> 二、使用方法</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1打开配置文件"><span class="toc-text"> 1.打开配置文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2配置项参数"><span class="toc-text"> 2.配置项参数</span></a></li></ol></li></ol></section>
	

	<section class="article typo">
		<div class="article-entry" itemprop="articleBody">
				<span class="zhaiyao">[摘要]</span>
			<p>VScode 编辑器对中文支持很好，插件丰富，主题也好看，所以目前已经由 sublime 转投 Vscode 了。在插件搜集中找到了可以自定义编辑器背景的插件<code>background</code>，炫酷的界面又可以优雅的装个叉了，所以立马上手尝试了一下。也对相关设置和过程进行一下记录。</p>
<a id="more"></a>
<h1 id="一-安装插件"><a class="markdownIt-Anchor" href="#一-安装插件"></a> 一、安装插件</h1>
<h2 id="1下载地址"><a class="markdownIt-Anchor" href="#1下载地址"></a> 1.下载地址</h2>
<p>VsCode 插件 Background 官方介绍：<a href="!https://marketplace.visualstudio.com/items?itemName=shalldie.background">探个鲜</a></p>
<h2 id="2安装扩展"><a class="markdownIt-Anchor" href="#2安装扩展"></a> 2.安装扩展</h2>
<p>(1) 打开扩展列表</p>
<p>1). 快捷键打开</p>
<ul>
<li>
<p>快捷键 <code>Ctrl+Shift+P</code></p>
</li>
<li>
<p>键入<code>install</code>找到<code>安装扩展</code></p>
<p>2). 直接打开左侧最下方的图标</p>
</li>
</ul>
<p>(2) 搜索<code>background</code></p>
<p>(3)安装并重新加载</p>
<h1 id="二-使用方法"><a class="markdownIt-Anchor" href="#二-使用方法"></a> 二、使用方法</h1>
<h2 id="1打开配置文件"><a class="markdownIt-Anchor" href="#1打开配置文件"></a> 1.打开配置文件</h2>
<p>1). 快捷键打开</p>
<ul>
<li>快捷键 <code>Ctrl+Shift+P</code></li>
<li>键入<code>settings</code>找到<code>首选项:打开设置</code></li>
</ul>
<blockquote>
<p>快捷键<code>Ctrl+,</code>可以直接打开(我的这个快捷键无效)</p>
</blockquote>
<p>2). 目录栏 <code>文件 》 首选项 》 设置</code></p>
<h2 id="2配置项参数"><a class="markdownIt-Anchor" href="#2配置项参数"></a> 2.配置项参数</h2>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">// 是否开启背景图显示</span><br><span class="line">"background.enabled": true,</span><br><span class="line">// true-显示默认的图片  false-显示用户自定义的图片</span><br><span class="line">"background.useDefault": false,</span><br><span class="line">// 自定义显示的图片，【路径要用双引号】</span><br><span class="line">"background.customImages": [</span><br><span class="line">    // 最多设置三张图片，默认显示最上方的图片，当打开多个侧边栏时再依次显示后面的背景图片</span><br><span class="line">    "D:/UserData/My Documents/My Pictures/man.jpg",</span><br><span class="line">    "D:/UserData/My Documents/My Pictures/geek2.jpg",</span><br><span class="line">    "D:/UserData/My Documents/My Pictures/jizhi.jpg",</span><br><span class="line">],</span><br><span class="line">"background.useFront": false,</span><br><span class="line">// 默认透明度是100%，看起来生硬，不够炫酷</span><br><span class="line">"background.style":&#123;</span><br><span class="line">    // 编辑器显示文字，默认在左上角</span><br><span class="line">    "content":"'HELLO WORLD'",</span><br><span class="line">    "pointer-events":"none",</span><br><span class="line">    // 以下都是CSS显示样式设置</span><br><span class="line">    "position":"absolute",</span><br><span class="line">    "top":"0",</span><br><span class="line">    "right":"0",</span><br><span class="line">    "width":"100%",</span><br><span class="line">    "height":"100%",</span><br><span class="line">    "z-index":"99999",</span><br><span class="line">    "background.repeat":"no-repeat",</span><br><span class="line">    "background-size":"contain",</span><br><span class="line">    // 设置透明度</span><br><span class="line">    "opacity":0.1</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>每次修改后都需要重启 VSCode 使修改生效。</p>

		</div>

		
			<div class="art-item-footer">
					
						<span class="art-item-left"><i class="icon icon-chevron-thin-left"></i> <a href="/2018/06/29/windows-tool/" rel="prev" title="【转】windows系统下的高效工具">
							【转】windows系统下的高效工具
						</a>上一篇文章</span>
					
					
						<span class="art-item-right">下一篇文章：<a href="/2018/06/20/summary-monthly2/" rel="next"  title="【总结】两个月的工作任务总结">
							【总结】两个月的工作任务总结
						</a><i class="icon icon-chevron-thin-right"></i></span>
					
			</div>
		

		
			

    <div class="recommended_posts">
        <h3>推荐文章</h3>
        <ul>
            
                <li><a href="http://blog.i2arch.tech/2018/07/01/php-practice-wx-tp5-1/">微信小程序结合ThinkPHP5实战项目（一）-- 数据库访问与ORM</a></li>
            
                <li><a href="http://blog.i2arch.tech/2018/06/29/windows-tool/">【转】windows系统下的高效工具</a></li>
            
                <li><a href="http://blog.i2arch.tech/2018/06/20/summary-monthly2/">【总结】两个月的工作任务总结</a></li>
            
                <li><a href="http://blog.i2arch.tech/2018/06/05/mysql-compare/">MySQL数据库常见名词对比</a></li>
            
        </ul>
    </div>


		
	</section>

	

</article>
<script>
	window.subData = {
		title: '【VSCode插件】background添加编辑器背景',
		tools: true
	}
</script>

      </div>

      <!-- 右侧边栏组件 -->
      <aside class='l_side'>
        
      </aside>

      <div class="gotop">
          
    <a href='javascript:void(0)'>
        <i class="icon icon-arrow_upward flat-box">
        </i>
    </a>

      </div>
      <script>setLoadingBarProgress(60);</script>
    </div>
  </div>
  <footer id="footer" class="clearfix">

	<div class="social-wrapper">
  	
      
        <a href="https://github.com/zqunor" class="social github"
          target="_blank" rel="external">
          <span class="icon icon-github"></span>
        </a>
      
        <a href="https://www.cnblogs.com/zqunor" class="social zhihu"
          target="_blank" rel="external">
          <span class="icon icon-zhihu"></span>
        </a>
      
        <a href="/atom.xml" class="social rss"
          target="_blank" rel="external">
          <span class="icon icon-rss"></span>
        </a>
      
    
  </div>
  <div>Theme <a href='https://github.com/stkevintan/hexo-theme-material-flow' class="codename">MaterialFlow</a>  Powered by<a href="https://blog.i2arch.tech/" target="_blank">程序小工</a>.</div>

</footer>

  <script>setLoadingBarProgress(80);</script>
  

    <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src='//cdn.bootcss.com/node-waves/0.7.5/waves.min.js'></script>
    <script src="//cdn.bootcss.com/scrollReveal.js/3.3.2/scrollreveal.min.js"></script>
    <script src="/js/jquery.fitvids.js"></script>
      <script>
        var GOOGLE_CUSTOM_SEARCH_API_KEY = "";
        var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "";
        var ALGOLIA_API_KEY = "";
        var ALGOLIA_APP_ID = "";
        var ALGOLIA_INDEX_NAME = "";
        var AZURE_SERVICE_NAME = "";
        var AZURE_INDEX_NAME = "";
        var AZURE_QUERY_KEY = "";
        var BAIDU_API_ID = "fca5b83cf69f752ddc96a61ef64a3659";
        var SEARCH_SERVICE = "hexo";
        var ROOT = "/" || "/";
        if (!ROOT.endsWith('/')) ROOT += '/';
      </script>
      <script src="/js/search.js"></script>
        <script src="/js/app.js"></script>
  <script>setLoadingBarProgress(100);</script>
</body>
</html>
